<template>
  <div class="dashboard">
    <h1>仪表盘</h1>
    <p>数据展示和统计页面</p>
    
    <!-- 使用 Element Plus 卡片组件展示统计数据 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="8" v-for="stat in stats" :key="stat.id">
        <el-card :body-style="{ padding: '20px' }" shadow="hover">
          <div class="card-content">
            <div class="stat-icon">
              <i :class="['el-icon-' + stat.icon, stat.color]"></i>
            </div>
            <div class="stat-info">
              <h3>{{ stat.title }}</h3>
              <p class="stat-value">{{ stat.value }}</p>
              <div class="stat-desc" v-if="stat.desc">
                <span :class="['change-indicator', stat.trend]">
                  {{ stat.change > 0 ? '+' : '' }}{{ stat.change }}%
                </span>
                <span class="desc-text">{{ stat.desc }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据表格区域 -->
    <div class="data-section">
      <h2>最近用户</h2>
      <el-table :data="recentUsers" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="用户名"></el-table-column>
        <el-table-column prop="role" label="角色"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
              {{ scope.row.status === 'active' ? '活跃' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
      </el-table>
    </div>
    
    <el-button type="danger" @click="handleLogout" class="logout-btn">退出登录</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { dashboardStats, users } from '../utils/mockData.js'
import { deleteCookie } from '../utils/cookieUtils.js'

const router = useRouter()
const stats = ref([])
const recentUsers = ref([])

// 组件挂载时加载数据
onMounted(() => {
  // 加载仪表盘统计数据
  stats.value = dashboardStats
  
  // 获取最近的5个用户数据
  recentUsers.value = users.slice(0, 5).map(user => ({
    ...user,
    createTime: new Date(user.createTime).toLocaleString()
  }))
})

// 处理退出登录
const handleLogout = () => {
  // 清除Cookie中的token
  deleteCookie('sso_token')
  
  // 清除localStorage中的用户信息
  localStorage.removeItem('currentUser')
  localStorage.removeItem('rememberedUsername')
  localStorage.removeItem('rememberedPassword')
  
  // 使用replace而不是push，并强制重新加载页面
  router.replace('/login').then(() => {
    // 强制重新加载页面，确保App.vue完全重新渲染
    window.location.reload()
  })
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
  height: 100%;
}

.stats-row {
  margin-top: 20px;
  margin-bottom: 30px;
}

.card-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  font-size: 36px;
  margin-right: 20px;
}

.stat-info {
  flex: 1;
}

.stat-icon.success {
  color: #67c23a;
}

.stat-icon.warning {
  color: #e6a23c;
}

.stat-icon.danger {
  color: #f56c6c;
}

.stat-icon.primary {
  color: #409eff;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  margin: 10px 0;
}

.stat-desc {
  font-size: 14px;
  color: #909399;
  display: flex;
  align-items: center;
  gap: 5px;
}

.change-indicator {
  display: inline-block;
}

.change-indicator.positive {
  color: #67c23a;
}

.change-indicator.negative {
  color: #f56c6c;
}

.data-section {
  margin-top: 30px;
}

.data-section h2 {
  margin-bottom: 20px;
  font-size: 18px;
}

.logout-btn {
  margin-top: 30px;
}
</style>